import React from 'react';
import { Box, IconButton, Typography, useTheme } from '@mui/material';
import { ChevronRight, ChevronLeft } from '@mui/icons-material';

export default function BottomBar({ onToggleSidebar, isSidebarOpen, uploadSpeed = '0 B/s', downloadSpeed = '0 B/s' }) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        height: '32px',
        backgroundColor: theme.palette.background.paper,
        color: theme.palette.text.primary,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        px: 1,
        zIndex: 1100
      }}
    >

      <Box sx={{ display: 'flex', gap: 2 }}>
        <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center', color: theme.palette.text.primary }}>
          ↑ {uploadSpeed}
        </Typography>
        <Typography variant="body2" sx={{ display: 'flex', alignItems: 'center', color: theme.palette.text.primary }}>
          ↓ {downloadSpeed}
        </Typography>
      </Box>

      <IconButton
        size="small"
        onClick={onToggleSidebar}
        sx={{ color: theme.palette.text.primary }}
      >
        {isSidebarOpen ? <ChevronRight /> : <ChevronLeft />}
      </IconButton>
    </Box>
  );
}